<template>

  <div class="clip">

    <video ref="videoPlayer" :poster="feed.video.imgUrl" preload="auto" crossorigin="anonymous" playsinline
      @ended="onVideoEnd" @click="handleVideoClick" v-if="feed.video">
      <source :src="feed.video.url" type="video/mp4" />
    </video>
    <van-icon name="play-circle-o" class="play-icon" size="60" color="#e54847" @click.stop="handleFirstPlay"
      v-show="isShowPlayIcon" />

    <div class="interactive">
      <img class="avatar" :src="feed.user.avatarurl" alt="">
      <van-icon class="thumb-icon" name="thumb-circle-o" size="40" />
      <span class="thumb-num">{{ feed.upCount }}</span>
      <van-icon name="comment-circle-o" size="40" />
      <span class="comment">评论</span>
      <van-icon class="share-icon" name="share-o" size="40" />
      <span class="share">分享</span>
    </div>

    <div class="clip-title">{{ feed.title }}</div>






  </div>

</template>


<script setup>

import { ref, computed, useTemplateRef, onMounted } from 'vue'


import { useStore } from "@/stores/index.js"
const store = useStore();
const feed = computed(() => store.feed)

const videoPlayer = useTemplateRef('videoPlayer')
const isShowPlayIcon = ref(true)
const hasPlayed = ref(false) // 新增播放状态标记

// 处理首次播放（唯一入口）
const handleFirstPlay = () => {
  if (!videoPlayer.value) return
  videoPlayer.value.play()
  hasPlayed.value = true
  isShowPlayIcon.value = false
}


// 处理视频点击（只有在播放后才生效）
const handleVideoClick = () => {
  if (!hasPlayed.value) return // 关键：首次必须通过图标点击
  videoPlayer.value.paused ? videoPlayer.value.play() : videoPlayer.value.pause()
  isShowPlayIcon.value = !isShowPlayIcon.value
}

const onVideoEnd = () => {
  videoPlayer.value.currentTime = 0
}

// 监听播放状态变化
onMounted(() => {
  if (videoPlayer.value) {
    // 确保初始状态
    videoPlayer.value.controls = false
    videoPlayer.value.pause()
    videoPlayer.value.currentTime = 0

    // 监听播放事件更新状态
    videoPlayer.value.addEventListener('play', () => {
      hasPlayed.value = true
      isShowPlayIcon.value = false
    })

    // 监听暂停事件（非必须）
    videoPlayer.value.addEventListener('pause', () => {
      isShowPlayIcon.value = true
    })
  }
});
</script>

<style scoped>
.clip {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #000;

}

video {
  cursor: pointer;
  height: 100vh;
  width: 100vw;
}


.play-icon {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.interactive {
  color: #fff;
  position: absolute;
  right: 20px;
  bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
  width: 30px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 20px;

}

.thumb-icon {
  margin-bottom: 5px;
}

.thumb-num {
  margin-bottom: 20px;
}


.comment {
  margin-bottom: 20px;
}

.clip-title {
  color: #fff;
  position: absolute;
  bottom: 50px;
  left: 20px;
  font-size: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100vw - 80px);
}
</style>
